<template>
  <div id="app">
     <input class="ipt" v-model="toDoMsg">
        <button class="btn" @click="appendMsgToList">添加</button>
        <p v-for="(item,index) in toDoList" :key="index">
            <span class="item">{{item}}</span>
        </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toDoMsg:'',
        toDoList:[]
      }
    },
    methods:{
      appendMsgToList(){
                    if(this.toDoMsg){
                        this.toDoList.push(this.toDoMsg);
                    }
                }
    }
  }
</script>

<style scoped>
.ipt{
  height: 40px;
  outline: none;
}
.btn{
  height: 40px;
  background-color: #40b883;
  color: white;
  margin-bottom: 20px;
}
.item{
  width: 400px;
  height: 40px;
  line-height: 40px;
  background-color: #40b883;
  color:white;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}
</style>
